<template>
  <a-card @click="router.push(`/blog/${article.id}`)" hoverable>
    <template #cover>
      <img class="article-cover" :src="`https://api.ixiaowai.cn/gqapi/gqapi.php?${article.id}`" alt="">
    </template>
    <template #actions>
      <div><HeartOutlined key="like" /> ({{ article.like_count }})</div>
      <div><StarOutlined key="star" /></div>
      <div><CommentOutlined key="comment" /> ({{ article.comment_count }})</div>
    </template>
    <a-card-meta :title="article.title">
      <template #description>{{article.content.substring(0, 100)}}</template>
    </a-card-meta>
  </a-card>
</template>

<script setup>
import {useRouter} from "vue-router";
import {HeartOutlined, StarOutlined, CommentOutlined} from "@ant-design/icons-vue";

const router = useRouter()

defineProps({
  article: {
    type: Object,
    required: true,
    default: {
      id: 0,
      title: '',
      content: '',
      comment_count: 0,
      like_count: 0
    }
  }
})
</script>

<style scoped>
.article-cover {
  height: 200px;
  object-fit: cover;
}
</style>